import { useState, useEffect } from 'react'
import { getComments } from '../api/comment'
import { List, Cell, Divider } from 'react-vant';
import CommentItem from './comment-item'
import { height } from 'dom7';
var offset
export default (props) => {
    const { art_id, type, item } = props
    const [list, setList] = useState([]);
    const [finished, setFinished] = useState(false);
    const [isLoaded, setIsLoaded] = useState(false);

    async function getData() {
        const res = await getComments(
            {
                type,
                source: art_id,
                limit: 10,
                offset
            }
        )

        offset = res.data.data.last_id
        if (res.data.data.results.length < 10) await setFinished(true);
        setIsLoaded(true)
        return res.data.data.results
    }
    useEffect(() => {
        console.log(987654);
        if (isLoaded) {
            setList(v => [item, ...v])
        }
    }, [item])
    const onLoad = async () => {
        // 异步更新数据
        const data = await getData();
        setList((v) => [...v, ...data]);
    };
    const render = () => {
        if (!isLoaded) {
            return (<div className="uniq"></div>)
        } else {
            return (list && list.length > 0
                ? list.map((item) => {
                    return <CommentItem clickOk={props.clickOk} key={item.com_id} data={item} art_id={art_id} />;
                })
                : null)
        }
    }
    return <List finished={finished} finishedText="已显示全部评论" onLoad={onLoad}>
        {render()}
    </List>
}